<template>
  <div class="newDrugs">
    <div class="titleP">
      <modules-title title-name="编辑库存信息">
        <template slot="btn">

          <el-button class="border-btn" @click="goBack"
          >取消
          </el-button
          >
          <el-button class="main-btn" type="primary" @click="saveDia"
          >保存
          </el-button
          >
        </template>
      </modules-title>
    </div>
    <div id="total-main" class="total-main">
      <div class="main">
        <div class="div">
          <h1 class="h1">基本信息</h1>
        </div>
        <div class="form">
          <el-form
            label-position='right'

            inline
            :model="form"
            label-width="90px"

          >
            <el-row>
              <el-col :span="8" class="left">
                <el-form-item
                  prop="product_name"
                  label="药品名称:"
                >
                  {{ form.product_name }}
                </el-form-item>
              </el-col
              >
              <el-col :span="8">
                <el-form-item
                  prop="category_name"
                  label="药品类型:"
                >
                  <div>{{form.category_name}}</div>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="OTC:" prop="">
                  是
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="包装规格:"
                  prop="pack"
                  class="norms"
                >
                  {{form.pack}}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="自定义分类:" prop="">
                  {{form.self_category}}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态:" prop="">
                  启用
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="生产厂家:"
                  prop="production"
                >
                  {{form.production}}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="批准文号:" prop=""
                >{{form.approval}}
                </el-form-item
                >
              </el-col>
              <el-col :span="8"
              >
                <el-form-item label="药品条形码:" prop=""
                >
                  {{form.bar_code}}
                </el-form-item
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="main">
        <div class="div">
          <h1 class="h1">库存销量设置</h1>
        </div>
        <div class="form">
          <el-form
            label-position='right'
            inline
            label-width="90px"
            ref="form"
            :model="form"
            :rules="rules"
          >
            <el-row>
              <el-col :span="8">

                <el-form-item label="库存" prop="number" class="norms">
                  <el-input
                    @focus="inputClear('number')"
                    clearable
                    disabled
                    class="inline-input input"
                    v-model="form.number"
                    placeholder="请输入库存数量"
                  >
                    <span slot="append" class="select">{{form.number_unit }} </span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="批次号:" prop="batch_no"
                >
                  <el-input
                    disabled
                    clearable
                    v-model="form.batch_no"
                    placeholder="请输入批次号"
                  ></el-input>
                </el-form-item
                >
              </el-col>
              <el-col :span="8" class="left">
                <el-form-item label="效期:" prop="expire_time">
                  <el-date-picker
                    v-model="form.expire_time"
                    value-format="yyyy-MM-dd"
                    align="right"
                    type="date"
                    placeholder="选择有效期"
                    :picker-options="pickerOptions">
                  </el-date-picker>
                </el-form-item>
              </el-col>


            </el-row>


          </el-form>
        </div>
      </div>


    </div>
    <save-dialog :dialogVisible="dialogVisible">
      <template slot="btn">

        <el-button class="border-btn" @click="dialogVisible = false"
        >取 消
        </el-button
        >
        <el-button class="main-btn" type="primary" @click="save"
        >确 定
        </el-button
        >
      </template>
    </save-dialog>
  </div>
</template>
<script>
  import saveDialog from "@/components/saveDialog.vue";
  import modulesTitle from "@/components/modulesTitle.vue";
  import {newEditDrugs, getDrugsWarehouseDetail,} from '@/api/drugsManagement.js'

  export default {
    components: {modulesTitle, saveDialog},
    name: 'newEditWarehouse',
    data() {
      var numberCheck = (rule, value, callback) => {
        this.form.number = value.replace(/\./, '').replace(new RegExp("([0]*)([0-9]+)", "g"), "$2")

        let reg1 = /^[0-9]\d{0,5}$/
        let flag1 = reg1.test(value);
        if (value == '00') {
          this.form.number = '0'
        }
        if (!flag1) {
          callback(new Error('请输入大于0的数,且最大999999'))
        }
        callback();
      }
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
          shortcuts: [{
            text: '1年',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 1 * 365 * 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '2年',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 2 * 365 * 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '3年',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3 * 365 * 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }]
        },

        dialogVisible: false,

        optionsCategory: [{
          label: '制品',
          value: 1
        },
          {
            label: '西药',
            value: 2
          },
          {
            label: '处方药',
            value: 3
          },
          {
            label: '耗材',
            value: 4
          },
          {
            label: '中成药',
            value: 5
          },
          {
            label: '饮片',
            value: 6
          },],

        form: {
          product_name: "",
          category_name: null,
          id: '0',

          self_category: "",
          otc: true,
          pack: "",
          number_unit: "",
          production: "",
          expire_time: "",
          approval: "",
          bar_code: "",
          batch_no: "批次号",
          number: '',
          split_piece: false,
          exchange: '',
          piece_unit: "",

          price: '',
          min_num: '',
          supplier: "",
          shelf_no: "",
          usage: "",

          rate: "",

          advice: "",
          product_status: true

        },

        rules: {
          number: [{required: true, validator: numberCheck, trigger: 'change'}],

          price: [{required: true, message: '请输入处方价', trigger: 'change'}],
        },
        value: '',
        options: [{
          label: '上次记录',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
        select: '盒',
        adv: {
          number: [{value: "100",},],
          expire_time: "2021-10-01",
          batch_no: [{value: "100",},],
        },
      }
    },

    computed: {

      unit() {
        if (this.form.split_piece == false) {
          return this.form.number_unit

        } else {
          return this.form.piece_unit
        }
      },
      price_unit() {
        if (this.form.split_piece == false) {
          return '元/' + this.form.number_unit

        } else {
          return '元/' + this.form.piece_unit
        }

      },
      unitEnd() {
        return this.form.split_piece ? '/' + this.form.number_unit : ''
      },

    },
    methods: {
      inputClear(val) {
        if (this.form[val] == "0" || this.form[val] == 0) {
          this.form[val] = "";
        }
      },
      unitCheck() {
        if (this.form.split_piece != false) {
          if (this.form.piece_unit == this.form.number_unit) {
            this.form.piece_unit = ''
            return this.$message.error('包装单位和拆零单位不能相同，请修改拆零单位')
          }
        } else {


        }
      },
      handleSelect() {
      },
      querySearch(queryString, cb, val) {
        let restaurants
        switch (val) {
          case 'product_name':
            restaurants = this.adv.product_name;
            break;

          case 'pack':
            restaurants = this.adv.pack;
            break;

          case 'self_category':
            restaurants = this.adv.self_category;
            break;

          case 'production':
            restaurants = this.adv.production;
            break;

          case 'approval':
            restaurants = this.adv.approval;
            break;

          case 'batch_no':
            restaurants = this.adv.batch_no;
            break;

          case 'number':
            restaurants = this.adv.number;
            break;


          case 'price':
            restaurants = this.adv.price;
            break;

          case 'min_num':
            restaurants = this.adv.min_num;
            break;

          case 'supplier':
            restaurants = this.adv.supplier;
            break;
          case 'shelf_no':
            restaurants = this.adv.shelf_no;
            break;


        }


        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      //保存按钮
      async saveDia() {
        let bool = false
        this.$refs.form.validate((valid) => {
          if (valid) {
            // this.dialogVisible = true
            bool = true
          }


        })
        if (bool == false) {
          return
        }
        let tip = '确认要保存吗'

        const confirm = await this.$confirm(tip, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).catch(err => err);

        if (confirm !== "confirm") {
          return this.$message.info("已取消");
        }
        this.save()

      },
      save() {
        // return

        //       this.dialogVisible = false
        let form = {
          store_id: Number(this.$route.query.id),
          expire_time: this.form.expire_time,
          batch_no: this.form.batch_no,
          number: Number(this.form.number),

        }


        newEditDrugs(form).then((res) => {
          if (res.code == 200) {

            this.$router.push({name: 'warehouseManagement'})
          } else {
            this.$message.success('编辑失败')
          }
        })


      },
      //取消按钮
      goBack() {
        this.$router.push({name: 'warehouseManagement'})
      },
      //获取药品详情信息
      getDrugsWarehouseDetailData(id) {
        getDrugsWarehouseDetail(id).then((res) => {
          if (res.code == 200) {
            this.form = {
              product_name: res.data.product_name,
              category_name: res.data.category_name,
              id: res.data.id.toString(),

              self_category: res.data.self_category,
              otc: res.data.otc,
              pack: res.data.pack,
              number_unit: res.data.number_unit,
              production: res.data.production,
              expire_time: res.data.expire_time,
              approval: res.data.approval,
              bar_code: res.data.bar_code,
              batch_no: res.data.batch_no,
              number: res.data.number.toString(),
              split_piece: res.data.split_piece,

              piece_unit: res.data.piece_unit,

              price: res.data.price.toString(),
              min_num: res.data.min_num.toString(),
              supplier: res.data.supplier,
              shelf_no: res.data.shelf_no,
              usage: res.data.usage,

              rate: res.data.rate,

              advice: res.data.advice,
              // product_status: res.data.product_status != undefined ? res.data.product_status.toString() : '',
              product_status: res.data.product_status

            }
          }
        })
      },

      aaaa() {
        console.log(this.form.min_num);

      },
    },
    created() {
      this.getDrugsWarehouseDetailData({store_id: this.$route.query.id})
      this.form.id = this.$route.query.id
    },
  }
</script>
<style>
</style>
<style lang="scss" scoped>
  @import "@/assets/scss/drugsManagement/newDrugs.scss";

   ::v-deep .el-input.is-disabled .el-input__inner{
     background-color: #f5f7fa!important;
   }
</style>
